/**
 * 暂时不用了
 */
import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
import { Popup } from 'antd-mobile';
import { ISearchData } from '../../../designer/service';
import selectedImg from '../../assets/selected'
import { IOnRender } from './category';
function CategoryTop({showList, $popupBox, controlId, selected, onSelected, onOk}: {
    $popupBox: RefObject<HTMLDivElement>
    controlId: string
} & IOnRender) {
    const [visible, $visible] = useState(false);
    const [sectionItem, $sectionItem] = useState<ISearchData['SectionList'][number] & {level?: number}>()
    const $headSection = useRef<HTMLUListElement>(null)
    const handleClick = useCallback((data: ISearchData['SectionList'][number], level: number) => {
        // 设置弹窗层的定位位置
        //@ts-ignore
        const {paddingLeft, paddingRight} = document.querySelector(`div[data-controlid="${controlId}"] .inbiz-BizBody`)?.style || {paddingLeft: 0, paddingRight: 0}
        if ($popupBox.current) {
            $popupBox.current.style.left = '-' + paddingLeft;
            $popupBox.current.style.right = '-' + paddingRight;
            $popupBox.current.style.top = $headSection.current!.offsetTop + $headSection.current!.offsetHeight + 'px'
        }
        $sectionItem({...data, level})
        $visible(true)
    }, []);
    
    const showPopupContent = useMemo(() => {
        return sectionItem ? <CategoryTopItemDetail 
            onOk={() => {
                onOk(sectionItem.level);
                $visible(false)
            }}
            selected={selected} 
            onSelected={onSelected} 
            data={sectionItem}
        /> : null
    }, [sectionItem, selected, onSelected]);

    return <>
      <ul className='headSection' ref={$headSection}>
        {showList.map((item, index) => {
          return <CategoryTopItem isSelect={item.Key === sectionItem?.Key} item={item} key={item.Key} onClick={() => handleClick(item, index)}  />;
        })}
      </ul> 
      <Popup
        className="searchResultSectionPopup"
        visible={visible}
        position='top'
        onMaskClick={() => $visible(false)}
        getContainer={() => $popupBox.current || document.body}
      >
        <div className='searchResultSectionPopupContent'>{showPopupContent}</div>
      </Popup> 
    </>
  }
function CategoryTopItem({
    item,
    onClick,
    isSelect
    }: {
    item: ISearchData['SectionList'][number];
    onClick: Function
    isSelect: boolean
}){
    return <li className={isSelect ? 'selected' : ''} onClick={() => onClick()}>{item.Value}</li>
}

function CategoryTopItemDetail({
    data,
    selected, 
    onSelected,
    onOk
}: {
    data: ISearchData['SectionList'][number];
} & Pick<IOnRender, 'onSelected' | 'selected' | 'onOk'>){
    const refOnOk = useRef<() => void>();
    refOnOk.current = onOk;
    const selectKeys = useMemo(() => {
        return selected.filter(item => item.includes(data.Key))
    }, [selected, data]);
    const handleClick = useCallback((sectionItem: typeof data["sectionItemList"][number], selectItem: boolean) => {
        onSelected([sectionItem.Key], !selectItem, sectionItem.isAll!, data.IsWhether)
        setTimeout(() => refOnOk.current?.(), 0)
    }, [onSelected, data]);
    return <ul className='searchResultTopSection'>{
        data.sectionItemList.map(item => {
            const selectItem = item.isAll ? selectKeys.length === 0 : selectKeys.includes(item.Key);
            return <li 
                key={item.Key}
                className={`ellipsis ${selectItem ? 'selected' : ''}`} 
                onClick={() => handleClick(item, selectItem)}
            >
                {selectItem && selectedImg}
                {item.Value}
            </li>
        })    
    }</ul>
}

export default CategoryTop;